<style lang="less">
.order{
    font-size: 16px;
    margin-left: 5px;
}
    .current{
        .card-title{
            display: inline-block;
            width: 100%;
            height: 24px;
            line-height: 24px;
            font-size: 14px;
            color: #1c2438;
            font-weight: 700;
            overflow: inherit;
            text-overflow: ellipsis;
            white-space: nowrap;
            
        }
    }
    .margin-top-10{
        margin-top: 10px;
    }
</style>
<template>
    <div class="current">
    
        <Row class="margin-top-10" :gutter="10">
            <Col :md="24" :lg="24">
                <Card :gutter="10">
                    <p slot="title" class="card-title">
                        <Row class="" :gutter="10">
                            <Col :md="4" :lg="2">
                                <div style="margin-top: 2px;">
                                    <Icon type="ios-pulse"></Icon>
                                    {{this.$route.meta.title}}
                                </div>
                            </Col>
                            <Col :md="20" :lg="22">
                                <Form style="font-size: 12px;" :model="formItem" :label-width="80" inline>
                                    用户名：
                                    <Input v-model="queryData.user_name.value" size="small" placeholder="请输入用户" style=" width: 150px;"></Input>
                                    <span style="margin-left: 10px;">选择日期范围：</span>
                                    <DatePicker size="small"  :value="formItem.time" @on-change="setTime" type="daterange" placeholder="请输入日期范围" style="width: 200px"></DatePicker>
                                    <Button type="primary"  size="small" style="margin-top: 0px;" @click="search">查询</Button>
                                    <Button type="ghost"  size="small" style="margin-top: 0px;margin-right: 10px;" @click="searchReset">重置</Button>
                                    <Checkbox v-model="single" @on-change="setpaid">显示欠款为0的用户</Checkbox>
                                </Form>
                            </Col>
                        </Row>
                    </p>
                    <div class="line-chart-con">
                        <Table border stripe :columns="title" :data="data" ></Table>
                    </div>
                    <Row class="margin-top-10" :gutter="10">
                        <Page :total="page.count" :current.sync="page.current" class-name="page-margin-top" show-elevator @on-change="pageTurn" show-sizer @on-page-size-change="listDisplayQuantity"></Page>
                    </Row>
                </Card>
            </Col>
            
        </Row>
        <Modal title="用户还款" v-model="modalCurrent" class-name="vertical-center-modal" ok-text="确认" @on-ok="confirmPaid()">
            <Form :model="currentData" :label-width="80">
                <FormItem label="用户名：">
                    {{thisUser}}
                    <!-- <Input v-model="currentData.user_name" placeholder="请输入用户名"></Input> -->
                </FormItem>
                <FormItem label="还款金额：">
                    <Input placeholder="请输入还款金额" number v-model="currentData.paid_money"></Input>
                </FormItem>
                <FormItem label="操作备注：">
                    <Input placeholder="请输入操作备注" v-model="currentData.comment"></Input>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>

export default {
    components: {

    },
    data () {
        return {
            single: false,
            data:[],
            currentData:{
                uid:'',
                paid_money:0,
                comment:''
            },
            thisUser:'',
            thisIndex:'',
            modalCurrent:false,
            formItem:{
                time:["",""],
            },
            order_param:'id',
            page:{
                count:0,
                current:1,
                limit:'0,10'
            },
            queryData:{
                all_un_paid:{
                    operator:'>',
                    value:'0'
                },
                user_name:{
                    operator:'=',
                    value:''
                }
            },
            title:[
                {
                    title:'用户名',
                    key: 'user_name',
                    align:'center'
                },
                {
                    title:'用户备注',
                    key: 'user_comment',
                    align:'center',
                    
                },
                {
                    title:'用户类型',
                    key: 'group_name',
                    align:'center',
                },
                {
                    title:'总付款',
                    key: 'all_paid',
                    align:'center',
                    render: (h, params) => {
                           return h('oc-Filter',{
                               props:{
                                   money:params.row.all_paid
                               }
                           })
                    },
                    renderHeader: (h, params) => {
                           return h('div', [
                               h('span',params.column.title),
                               h('a',{
                                   class:'order',
                                   style:{
                                       color: this.order_param==params.column.key?'':'#a0a0a0'
                                   },
                                   on: {
                                        click: () => {
                                            this.order (params.column.key)
                                        },
                                    },
                               },[
                                   h('Icon',{
                                        props:{
                                            type:"arrow-down-b"                                           
                                        }
                                   })
                               ])
                           ])//params.column.key
                    }
                },
                {
                    title:'总欠款',
                    key: 'all_un_paid',
                    align:'center',
                    render: (h, params) => {
                           return h('oc-Filter',{
                               props:{
                                   money:params.row.all_un_paid
                               }
                           })
                    },
                    renderHeader: (h, params) => {
                           return h('div', [
                               h('span',params.column.title),
                               h('a',{
                                   class:'order',
                                   style:{
                                       color: this.order_param==params.column.key?'':'#a0a0a0'
                                   },
                                   on: {
                                        click: () => {
                                            this.order (params.column.key)
                                        },
                                    },
                               },[
                                   h('Icon',{
                                        props:{
                                            type:"arrow-down-b"                                           
                                        }
                                   })
                               ])
                           ])//params.column.key
                    }
                },
                {
                    title:'余额',
                    key: 'balance',
                    align:'center',
                    render: (h, params) => {
                           return h('oc-Filter',{
                               props:{
                                   money:params.row.balance
                               }
                           })
                    },
                    renderHeader: (h, params) => {
                           return h('div', [
                               h('span',params.column.title),
                               h('a',{
                                   class:'order',
                                   style:{
                                       color: this.order_param==params.column.key?'':'#a0a0a0'
                                   },
                                   on: {
                                        click: () => {
                                            this.order (params.column.key)
                                        },
                                    },
                               },[
                                   h('Icon',{
                                        props:{
                                            type:"arrow-down-b"                                           
                                        }
                                   })
                               ])
                           ])//params.column.key
                    }
                },
                {
                    title:'最近操作时间',
                    key: 'updated',
                    align:'center',
                    renderHeader: (h, params) => {
                           return h('div', [
                               h('span',params.column.title),
                               h('a',{
                                   class:'order',
                                   style:{
                                       color: this.order_param==params.column.key?'':'#a0a0a0'
                                   },
                                   on: {
                                        click: () => {
                                            this.order (params.column.key)
                                        },
                                    },
                               },[
                                   h('Icon',{
                                        props:{
                                            type:"arrow-down-b"                                           
                                        }
                                   })
                               ])
                           ])//params.column.key
                    }
                },
                {
                    title:'操作',
                    key: '',
                    align:'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button',{
                                props:{
                                    type:"info",
                                    size:"small",
                                },
                                on: {
                                    click: () => {
                                        this.paid(params.row,params.index)
                                    },
                                },
                            },"还款"),
                            h('Button',{
                                props:{
                                    type:"warning",
                                    size:"small",
                                },
                                style:{
                                    'margin-left':'5px'
                                },
                                on: {
                                    click: () => {
                                        this.returnZero(params.row,params.index)
                                    },
                                },
                            },"清零"),
                        ])   
                    }
                }
            ]
                
            
        }
    },
    computed: {
        
    },
    mounted(){
        // this.formItem.time=this.getNowFormatDate()
        this.getCheck()
    },
    methods: {
        setpaid(b){
            if(b){
                this.queryData.all_un_paid.value=''
            }else{
                this.queryData.all_un_paid.value='0'
            }
            this.getCheck()
        },
        confirmPaid(){
            let thisData=this.data[this.thisIndex]
            let data={
                query:{
                    limit:this.page.limit,
                    order_param:this.order_param
                },
                data:{
                    ...this.currentData
                }
            }
            if(this.currentData.paid_money==null||this.currentData.paid_money==0){
                this.$Notice.error({
                    title: '还款失败',
                    desc: '请输入有效的还款金额'
                });
            }else{
                this.$api.repeater(this,'setPaid',data).then(res=>{
                    if(res.success==true){
                        this.data[this.thisIndex].all_un_paid=res.data.this_all_un_paid
                        this.data[this.thisIndex].all_paid=thisData.all_paid+res.data.paid_money
                        this.$Notice.success({
                            title: '还款成功',
                            desc:  `用户：${this.thisUser},还款${res.data.paid_money}`
                        });
                    }else{
                        this.$Notice.error({
                            title: '还款失败',
                            desc: res.error
                        });
                    }
                })
                // this.$api.setPaid(data).then(response=>{
                //     response.json().then(responseJson=> {
                //         if(responseJson.success==true){
                //             this.data[this.thisIndex].all_un_paid=responseJson.data.this_all_un_paid
                //             this.data[this.thisIndex].all_paid=thisData.all_paid+responseJson.data.paid_money
                //             this.$Notice.success({
                //                 title: '还款成功',
                //                 desc:  `用户：${this.thisUser},还款${responseJson.data.paid_money}`
                //             });
                //         }else{
                //             this.$Notice.error({
                //                 title: '还款失败',
                //                 desc: responseJson.error
                //             });
                //         }
                //     })
                // })
            }
            
        },
        search(){
            this.getCheck()
        },
        searchReset(){
            this.formItem.time=["",""]
            this.queryData.user_name.value=''
            this.getCheck()
        },
        paid(r,i){
            this.currentData.paid_money=0
            this.currentData.comment=''
            this.thisIndex=i
            this.currentData.uid=r.uid
            this.thisUser=r.user_name
            this.modalCurrent=true
            
        },
        setTime(t){
            this.formItem.time=t
        },
        getNowFormatDate () {
            let time = (data) =>{
                let date = new Date();
                if(data) date.setDate(date.getDate()+data);
                let Y = date.getFullYear()
                let M = date.getMonth() + 1;
                let D = date.getDate();
                let h = date.getHours()
                let m = date.getMinutes()
                let s = date.getSeconds()
                if (M >= 1 && M <= 9) M = "0" + M;
                if (D >= 0 && D <= 9) D = "0" + D;
                if (h >= 0 && h <= 9) h = "0" + h;
                if (m >= 0 && m <= 9) m = "0" + m;
                if (s >= 0 && s <= 9) s = "0" + s;
                return `${Y}-${M}-${D}`
            }
            return [time(-30),time(1)];
        },
        order(key){
            this.order_param=this.order_param==key?'id':key
            this.getCheck()
        },
        getCheck(){
            let data={
                limit:this.page.limit,
                order_param:this.order_param,
                query_params:this.$oc.ocqm(this.queryData),
                time_between:this.formItem.time[0]!==""?`${this.formItem.time[0]},${this.formItem.time[1]}`:''
            }
            this.$api.repeater(this,'getCheck',data).then(res=>{
                if(res.success==true){
                    if(res.data.Records===null){
                        this.data=[]
                    }else{
                        this.data=res.data.Records
                    }
                    this.page.count=res.data.Count
                }else{
                    this.$Notice.error({
                        title: '账户资金获取失败，可能是网络故障。。',
                        desc: res.error
                    });
                }
            })
            // this.$api.getCheck(data).then(response=>{
            //     response.json().then(responseJson=> {
            //         if(responseJson.success==true){
            //             if(responseJson.data.Records===null){
            //                 this.data=[]
            //             }else{
            //                 this.data=responseJson.data.Records
            //             }
            //             this.page.count=responseJson.data.Count
            //         }else{
            //             this.$Notice.error({
            //                 title: '账户资金获取失败，可能是网络故障。。',
            //                 desc: responseJson.error
            //             });
            //         }
            //     })
            // })
        },
        returnZero(r,i){
            let data={
                query:{
                    limit:this.page.limit,
                    order_param:'id',
                },
                data:{
                    id:r.id,
                    uid:r.uid,
                    version:r.version,
                }
            }
            this.$api.repeater(this,'setCheck',data).then(res=>{
                if(res.success==true){
                    this.$Notice.success({
                        title: '清零成功',
                        desc: res.info
                    });
                    this.data[i].all_un_paid=0
                }else{
                    this.$Notice.error({
                        title: '操作失败',
                        desc: res.error
                    });
                }
            })
            // this.$api.setCheck(data).then(response=>{
            //     response.json().then(responseJson=> {
            //         if(responseJson.success==true){
            //             this.$Notice.success({
            //                 title: '清零成功',
            //                 desc: responseJson.info
            //             });
            //             this.data[i].all_un_paid=0
            //         }else{
            //             this.$Notice.error({
            //                 title: '操作失败',
            //                 desc: responseJson.error
            //             });
            //         }
            //     })
            // })
        },
        //翻页
        pageTurn(ev){
            let limit=this.page.limit.split(",");
            this.page.limit=`${(ev-1)*limit[1]},${limit[1]}`
            this.getCheck()
        },
        //列表显示行数
        listDisplayQuantity(ev){
            this.page.limit=`0,${ev}`
            this.getCheck()
        },
        //回到第一页
        startPage(){
            this.page.current=1
            let limit=this.page.limit.split(",");
            this.page.limit=`0,${limit[1]}`
        },
    }
};
</script>
